/**
 * Created with JetBrains PhpStorm.
 * User: ishowshao
 * Date: 13-4-22
 */
define(['Zen', 'app/Matrix'], function (Zen, Matrix) {
    return Zen.extend({}, {
        constructor: function (config) {
            this.x = config['x'];
            this.y = config['y'];
            this.cell = config['cell'];
            this.matrix = new Matrix();
            this.matrix.init(this.x, this.y);

            this.cellWidth = this.cell;
            this.cellHeight = this.cell;
            this.width = this.x * (this.cellWidth + 1);
            this.height = this.y * (this.cellHeight + 1);
        },
        draw: function () {
            var gridHtml = [];
            var rowHtml = [];
            gridHtml.push('<div class="ff-grid" style="width: ' + this.width + 'px; height: ' + this.height + 'px;">');
            for (var i = 0; i < this.y; i += 1) {
                rowHtml = [];
                rowHtml.push('<div class="ff-grid-row">');
                for (var j = 0; j < this.x; j += 1) {
                    rowHtml.push('<span class="ff-grid-cell" data-x="' + j + '" data-y="' + i + '" style="width:' + this.cellWidth + 'px; height:' + this.cellHeight + 'px;"></span>');
                }
                rowHtml.push('</div>');
                gridHtml.push(rowHtml.join(''));
            }
            gridHtml.push('</div>');
            return gridHtml.join('');
        },
        render: function (renderTo) {
            this.el = jQuery(this.draw());
            jQuery(renderTo).append(this.el);
        },
        getOffset: function () {
            return this.el.offset();
        }
    });
});
